﻿<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../Styles/jqx.apireference.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/documentation.js"></script>
    <meta name="keywords" content="jQuery, switch button, Radio Button, RadioButton, CheckInput, RadioInput, Button" />
    <meta name="description" content="This page represents the help documentation of the jqxSwitchButton and jqxRadioButton widgets." />
    <title>jqxSwitchButton and jqxRadioButton API Reference</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".documentation-option-type-click").click(function (event) {
                $(event.target).parents('tr').next().find(".property-content").toggle();
            });
        });
    </script>
</head>
<body>
   
<div id="properties">
    <h2 style="text-align: left;" class="documentation-top-header">
        Properties</h2>
    <table class="documentation-table">
        <tr>
            <th>
                Name
            </th>
            <th>
                Type
            </th>
            <th>
                Default
            </th>
        </tr>
        <tr>
            <td class="documentation-option-type-click">
                <span id='Span21'>width</span>
            </td>
            <td>
                <span>Number/String</span>
            </td>
            <td>
                null
            </td>
        </tr>
        <tr>
            <td colspan='3' style='width: 100%'>
                <div class="documentation-option-description property-content" style="display: none;">
                    <p>
                        Sets or gets the width.</p>
                    <h4>
                        Code examples</h4>
                    <p>
                        Set the <code>width</code> property.
                    </p>
                    <pre><code>$('#jqxSwitchButton').jqxSwitchButton({width:"200px"});</code></pre>
                    <p>
                                Get the <code>width</code> property.
                    </p>
                    <pre><code>var width = $('#jqxSwitchButton').jqxSwitchButton('width');</code></pre>
                    <div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/jfJwq/">width is set to 80</a></div>
                        </div>
            </td>
        </tr>
        <tr>
            <td class="documentation-option-type-click">
                <span id='Span6'>height</span>
            </td>
            <td>
                <span>Number/String</span>
            </td>
            <td>
                null
            </td>
        </tr>
        <tr>
            <td colspan='3' style='width: 100%'>
                <div class="documentation-option-description property-content" style="display: none;">
                    <p>
                        Sets or gets the height.</p>
                    <h4>
                        Code examples</h4>
                    <p>
                        Set the <code>height</code> property .
                    </p>
                    <pre><code>$('#jqxSwitchButton').jqxSwitchButton({height:"400px"});</code></pre>
                    <p>
                                Get the <code>height</code> property.
                    </p>
                    <pre><code>var height = $('#jqxSwitchButton').jqxSwitchButton('height');</code></pre>
                <div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Zg4cX/">height is set to 30</a></div>
                        </div>
            </td>
        </tr>
        <tr>
            <td class="documentation-option-type-click">
                <span id='Span7'>disabled</span>
            </td>
            <td>
                <span>Boolean</span>
            </td>
            <td>
                false
            </td>
        </tr>
        <tr>
            <td colspan='3' style='width: 100%'>
                <div class="documentation-option-description property-content" style="display: none;">
                    <p>
                        Sets or gets whether the switch button is disabled.</p>
                    <h4>
                        Code examples</h4>
                    <p>
                        Set the <code>disabled</code> property.
                    </p>
                    <pre><code>$('#jqxSwitchButton').jqxSwitchButton({ disabled:true }); </code></pre>
                    <p>
                                Get the <code>disabled</code> property.
                    </p>
                    <pre><code>var disabled = $('#jqxSwitchButton').jqxSwitchButton('disabled');</code></pre>
                    <div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/E5pw9/">disabled is set to true</a></div>
                        </div>
            </td>
        </tr>
        <tr>
            <td class="documentation-option-type-click">
                <span id='Span8'>orientation</span>
            </td>
            <td>
                <span>String</span>
            </td>
            <td>
                'horizontal'
            </td>
        </tr>
        <tr>
            <td colspan='3' style='width: 100%'>
                <div class="documentation-option-description property-content" style="display: none;">
                    <p>
                        Determines the jqxSwitchButton's orientation.</p> 
                        <b>Possible Values:</b>
                                <br />
                        <pre><code>'horizontal' </code></pre>
                        <pre><code>'vertical'</code></pre>
                    <h4>
                        Code examples</h4>
                    <p>
                        Set the <code>orientation</code> property.
                    </p>
                    <pre><code>$('#jqxSwitchButton').jqxSwitchButton({ orientation:vertical }); </code></pre>
                    <p>
                                Get the <code>orientation</code> property.
                    </p>
                    <pre><code>var orientation = $('#jqxSwitchButton').jqxSwitchButton('orientation');</code></pre>
                <div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/bj3YP/">orientation is set to 'vertical'</a></div>
                        </div>
            </td>
        </tr>
        <tr>
            <td class="documentation-option-type-click">
                <span id='Span9'>onLabel</span>
            </td>
            <td>
                <span>String</span>
            </td>
            <td>
                'On'
            </td>
        </tr>
        <tr>
            <td colspan='3' style='width: 100%'>
                <div class="documentation-option-description property-content" style="display: none;">
                    <p>
                        Sets or gets the string displayed when the button is checked.</p>
                    <h4>
                        Code examples</h4>
                    <p>
                        Set the <code>onLabel</code> property.
                    </p>
                    <pre><code>$('#jqxSwitchButton').jqxSwitchButton({ onLabel:'ON' }); </code></pre>
                    <p>
                                Get the <code>onLabel</code> property.
                    </p>
                    <pre><code>var onLabel = $('#jqxSwitchButton').jqxSwitchButton('onLabel');</code></pre>
                    <div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5ge3D/">onLabel is set to 'On'</a></div>
                        </div>
            </td>
        </tr>
        <tr>
            <td class="documentation-option-type-click">
                <span id='Span10'>offLabel</span>
            </td>
            <td>
                <span>String</span>
            </td>
            <td>
                'Off'
            </td>
        </tr>
        <tr>
            <td colspan='3' style='width: 100%'>
                <div class="documentation-option-description property-content" style="display: none;">
                    <p>
                        Sets or gets the string displayed when the button is unchecked.</p>
                    <h4>
                        Code examples</h4>
                    <p>
                        Set the <code>offLabel</code> property.
                    </p>
                    <pre><code>$('#jqxSwitchButton').jqxSwitchButton({ offLabel:'OFF' }); </code></pre>
                    <p>
                                Get the <code>offLabel</code> property.
                    </p>
                    <pre><code>var offLabel = $('#jqxSwitchButton').jqxSwitchButton('offLabel');</code></pre>
                <div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/R3D5t/">offLabel is set to 'Off'</a></div>
                        </div>
            </td>
        </tr>
        <tr>
            <td class="documentation-option-type-click">
                <span id='Span11'>thumbSize</span>
            </td>
            <td>
                <span>String</span>
            </td>
            <td>
                '40%'
            </td>
        </tr>
        <tr>
            <td colspan='3' style='width: 100%'>
                <div class="documentation-option-description property-content" style="display: none;">
                    <p>
                        Sets or gets the size of the thumb in percentages.</p>
                    <h4>
                        Code examples</h4>
                    <p>
                        Set the <code>thumbSize</code> property.
                    </p>
                    <pre><code>$('#jqxSwitchButton').jqxSwitchButton({ thumbSize:'50%' }); </code></pre>
                    <p>
                                Get the <code>thumbSize</code> property.
                    </p>
                    <pre><code>var thumbSize = $('#jqxSwitchButton').jqxSwitchButton('thumbSize');</code></pre>
                <div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/2rFLw/">thumbSize is set to '30%'</a></div>
                        </div>
            </td>
        </tr>
        <tr>
            <td class="documentation-option-type-click">
                <span id='Span12'>checked</span>
            </td>
            <td>
                <span>Boolean</span>
            </td>
            <td>
                false
            </td>
        </tr>
        <tr>
            <td colspan='3' style='width: 100%'>
                <div class="documentation-option-description property-content" style="display: none;">
                    <p>
                        Sets or gets the check state. </p>
                                                                                       
                    <h4>
                        Code examples</h4>
                    <p>
                        Set the <code>checked</code> property.
                    </p>
                    <pre><code>$('#jqxSwitchButton').jqxSwitchButton({ checked:true }); </code></pre>
                    <p>
                                Get the <code>checked</code> property.
                    </p>
                    <pre><code>var checked = $('#jqxSwitchButton').jqxSwitchButton('checked');</code></pre>
                    <div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ecrvd/">checked is set to true</a></div>
                        </div>
            </td>
        </tr>
        <tr>
            <td colspan='3' style='width: 100%'>
                <h2 class="documentation-top-header">
                    Events</h2>
            </td>
        </tr>
        <tr>
            <td class="documentation-option-type-click">
                <span id='Span13'>checked</span>
            </td>
            <td>
                <span>Event</span>
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan='3' style='width: 100%'>
                <div class="documentation-option-description property-content" style="display: none;">
                    <p>
                        This event is triggered when the switch button is checked.
                    </p>
                    <h4>
                        Code examples</h4>
                    <p>
                        Bind to the <code>checked</code> event by type: jqxSwitchButton.
                    </p>
                    <pre><code>$('#jqxSwitchButton').bind('checked', function (event) { // Some code here.}); </code></pre>
                                                                                                <div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/2bU8L/">Bind to the checked event by type: jqxSwitchButton</a></div>
                        </div>
            </td>
        </tr>
        <tr>
            <td class="documentation-option-type-click">
                <span id='Span14'>unchecked</span>
            </td>
            <td>
                <span>Event</span>
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan='3' style='width: 100%'>
                <div class="documentation-option-description property-content" style="display: none;">
                    <p>
                        This event is triggered when the switch button is unchecked.
                    </p>
                    <h4>
                        Code examples</h4>
                    <p>
                        Bind to the <code>unchecked</code> event by type: jqxSwitchButton.
                    </p>
                    <pre><code>$('#jqxSwitchButton').bind('unchecked', function (event) { // Some code here.}); </code></pre>
                                                                                                                                                                                <div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Pv4Kf/">Bind to the unchecked event by type: jqxSwitchButton</a></div>
                        </div>
            </td>
        </tr>
        <tr>
            <td class="documentation-option-type-click">
                <span id='Span15'>change</span>
            </td>
            <td>
                <span>Event</span>
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan='3' style='width: 100%'>
                <div class="documentation-option-description property-content" style="display: none;">
                    <p>
                        This event is triggered when the switch button's state changes from one state to another.
                    </p>
                    <h4>
                        Code examples</h4>
                    <p>
                        Bind to the <code>change</code> event by type: jqxSwitchButton.
                    </p>
                    <pre><code>$('#jqxSwitchButton').bind('change', function (event) { // Some code here.}); </code></pre>
                                                                                                                                                                                <div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/6VbfW/">Bind to the change event by type: jqxSwitchButton</a></div>
                        </div>
            </td>
        </tr>
        <tr>
            <td colspan='3' style='width: 100%'>
                <h2 class="documentation-top-header">
                    Methods</h2>
            </td>
        </tr>
        <tr>
            <td class="documentation-option-type-click">
                <span id='Span16'>check</span>
            </td>
            <td>
                <span>Method</span>
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan='3' style='width: 100%'>
                <div class="documentation-option-description property-content" style="display: none;">
                    <p>
                        Checks the button.</p>
                    <h4>
                        Code example</h4>
                    <p>
                        Invoke the <code>check</code> method.
                    </p>
                    <pre><code>$('#jqxSwitchButton').jqxSwitchButton('check');</code></pre>
                                                                                                                                                                                                                                                                    <div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/k9d5B/">checks the jqxSwitchButton</a></div>
                        </div>
            </td>
        </tr>
        <tr>
            <td class="documentation-option-type-click">
                <span id='Span17'>uncheck</span>
            </td>
            <td>
                <span>Method</span>
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan='3' style='width: 100%'>
                <div class="documentation-option-description property-content" style="display: none;">
                    <p>
                        Unchecks the button.</p>
                    <h4>
                        Code example</h4>
                    <p>
                        Invoke the <code>uncheck</code> method.
                    </p>
                    <pre><code>$('#jqxSwitchButton').jqxSwitchButton('uncheck');</code></pre>
                                                                                                                                                                                                                                                                    <div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/guWgQ/">unchecks the jqxSwitchButton</a></div>
                        </div>
            </td>
        </tr>
        <tr>
            <td class="documentation-option-type-click">
                <span id='Span18'>toggle</span>
            </td>
            <td>
                <span>Method</span>
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan='3' style='width: 100%'>
                <div class="documentation-option-description property-content" style="display: none;">
                    <p>
                        Toggles the check state. This method is automatically called when the user clicks
                        the switch button.</p>
                    <h4>
                        Code example</h4>
                    <p>
                        Invoke the <code>toggle</code> method.
                    </p>
                    <pre><code>$('#jqxSwitchButton').jqxSwitchButton('toggle');</code></pre>
                                                                                                                                                                                                                                                                    <div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Cnp9K/">toggles the jqxSwitchButton</a></div>
                        </div>
            </td>
        </tr>
        <tr>
            <td class="documentation-option-type-click">
                <span id='Span19'>disable</span>
            </td>
            <td>
                <span>Method</span>
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan='3' style='width: 100%'>
                <div class="documentation-option-description property-content" style="display: none;">
                    <p>
                        Disables the switch button.</p>
                    <h4>
                        Code example</h4>
                    <p>
                        Invoke the <code>disable</code> method.
                    </p>
                    <pre><code>$('#jqxSwitchButton').jqxSwitchButton('disable');</code></pre>
                                                                                                                                                                                                                                                                    <div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/fRKg8/">disable the jqxSwitchButton</a></div>
                        </div>
            </td>
        </tr>
        <tr>
            <td class="documentation-option-type-click">
                <span id='Span20'>enable</span>
            </td>
            <td>
                <span>Method</span>
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan='3' style='width: 100%'>
                <div class="documentation-option-description property-content" style="display: none;">
                    <p>
                        Enables the switch button.</p>
                    <h4>
                        Code example</h4>
                    <p>
                        Invoke the <code>enable</code> method.
                    </p>
                    <pre><code>$('#jqxSwitchButton').jqxSwitchButton('enable');</code></pre>
                                                                                                                                                                                                                                                                    <div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/DnYEn/">enables the jqxSwitchButton</a></div>
                        </div>
            </td>
        </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span59'>val</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the value.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the <code>val</code> method.
                        </p>
                        // Get the value.
                        <pre><code>var value = $("#jqxSwitchButton").jqxSwitchButton('val');</code></pre>                       
                        // Get the value using jQuery's val()
                        <pre><code>var value = $("#jqxSwitchButton").val();</code></pre>                       
                        // Set value.
                            <pre><code>$("#jqxSwitchButton").jqxSwitchButton('val', true);</code></pre>                       
                        // Set value using jQuery's val().
                            <pre><code>$("#jqxSwitchButton").val(true);</code></pre>                                              
                                                                                                                                                                                                                                                                        <div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/LM3aX/">sets the value of the jqxSwitchButton</a></div>
                            </div>
                </td>
            </tr>
        </table>
        <br />
    </div>
</body>
</html>
